<!DOCTYPE html>
<html>
<head>
    <title>:nth-last-child test</title>
    <style>
        /** We have weird spacing inside parentheses to test parser. */
        .odd > div:nth-last-child(odd ) {
            background-color: lightblue;
        }
        ._2n-plus-1 > div:nth-last-child(2n+1) {
            background-color: lightblue;
        }
        .even > div:nth-last-child( even) {
            background-color: lightblue;
        }
        ._2n > div:nth-last-child( 2n ) {
            background-color: lightblue;
        }
        ._3n > div:nth-last-child(3n) {
            background-color: lightblue;
        }
        ._2 > div:nth-last-child(2 ) {
            background-color: lightblue;
        }
        ._3n-plus-1 > div:nth-last-child( 3n + 1 ) {
            background-color: lightblue;
        }
        ._3n-minus-1 > div:nth-last-child( 3n -1) {
            background-color: lightblue;
        }
        ._minus-n-plus-3 > div:nth-last-child(-n+ 3) {
            background-color: lightblue;
        }
        /** "n" is special case inside parser. */
        .n > div:nth-last-child(n) {
            background-color: lightblue;
        }
        /** "+n" is special case inside parser. */
        .plus-n > div:nth-last-child(+n) {
            background-color: lightblue;
        }
        /** "-n" is special case inside parser. */
        .minus-n > div:nth-last-child(-n) {
            background-color: lightblue;
        }
        ._0n-plus-1 > div:nth-last-child(-0n+1) {
            background-color: lightblue;
        }
        .n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3) {
            background-color: lightblue;
        }
        .acid3 > div:nth-last-child(-5n+3) {
            background-color: lightblue;
        }
        /* Separate because only Safari supports this syntax right now */
        .test-of > div:nth-last-child(3n+1 of .special) {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<h4>:nth-last-child(odd)</h4>
<div class="odd">
    <div>1</div>
    <div>2 +</div>
    <div>3</div>
    <div>4 +</div>
</div>

<h4>:nth-last-child(2n+1) - same as odd</h4>
<div class="_2n-plus-1">
    <div>1</div>
    <div>2 +</div>
    <div>3</div>
    <div>4 +</div>
</div>

<h4>:nth-last-child(even)</h4>
<div class="even">
    <div>1 +</div>
    <div>2</div>
    <div>3 +</div>
    <div>4</div>
</div>

<h4>:nth-last-child(2n) - same as even</h4>
<div class="_2n">
    <div>1 +</div>
    <div>2</div>
    <div>3 +</div>
    <div>4</div>
</div>

<h4>:nth-last-child(2)</h4>
<div class="_2">
    <div>1</div>
    <div>2 +</div>
    <div>3</div>
</div>

<h4>:nth-last-child(3n)</h4>
<div class="_3n">
    <div>1 +</div>
    <div>2</div>
    <div>3</div>
    <div>4 +</div>
    <div>5</div>
    <div>6 </div>
</div>

<h4>:nth-last-child(3n+1)</h4>
<div class="_3n-plus-1">
    <div>1</div>
    <div>2</div>
    <div>3 +</div>
    <div>4</div>
    <div>5</div>
    <div>6 +</div>
</div>

<h4>:nth-last-child(3n-1)</h4>
<div class="_3n-minus-1">
    <div>1</div>
    <div>2 +</div>
    <div>3</div>
    <div>4</div>
    <div>5 +</div>
    <div>6</div>
</div>

<h4>:nth-last-child(-n+3)</h4>
<div class="_minus-n-plus-3">
    <div>1</div>
    <div>2 +</div>
    <div>3 +</div>
    <div>4 +</div>
</div>

<h4>:nth-last-child(n)</h4>
<div class="n">
    <div>1 +</div>
    <div>2 +</div>
    <div>3 +</div>
</div>

<h4>:nth-last-child(-n) - same as n</h4>
<div class="n">
    <div>1 +</div>
    <div>2 +</div>
    <div>3 +</div>
</div>

<h4>:nth-last-child(+n) - same as n</h4>
<div class="n">
    <div>1 +</div>
    <div>2 +</div>
    <div>3 +</div>
</div>

<h4>:nth-last-child(0n+1)</h4>
<div class="_0n-plus-1">
    <div>1</div>
    <div>2</div>
    <div>3 +</div>
</div>

<h4>:nth-last-child(n+2):nth-last-child(-n+3)</h4>
<div class="n-plus-2__minus-n-plus-3">
    <div>1</div>
    <div>2</div>
    <div>3 +</div>
    <div>4 +</div>
    <div>5</div>
</div>

<h4>:nth-last-child(-5n+3) - Acid3</h4>
<div class="acid3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13 +</div>
    <div>14</div>
    <div>15</div>
</div>

<h4>:nth-last-child(3n+1 of .special)</h4>
<div class="test-of">
    <div class="special">1</div>
    <div class="special">2</div>
    <div>(Ignored)</div>
    <div class="special">3 +</div>
    <div>(Ignored)</div>
    <div class="special">4</div>
    <div>(Ignored)</div>
    <div>(Ignored)</div>
    <div class="special">5</div>
    <div class="special">6 +</div>
</div>
</body>
</html>
